<div id="registerDiv">
    <section class="material-half-bg">
        <div class="cover"></div>
    </section>
    <section class="login-content">
        <div class="logo">
            <h1>注册</h1>
        </div>
        <div class="login-box">
            <form class="login-form" action="javascript:void(0);">
                <h3 class="login-head">
                    <i class="fa fa-lg fa-fw fa-user-plus"></i>
                    注册
                </h3>
                <div class="form-group">
                    <label class="control-label">账号</label>
                    <input class="form-control" type="text" placeholder="账号" autofocus v-model="user.userName">
                </div>
                <div class="form-group">
                    <label class="control-label">密码</label>
                    <input class="form-control" type="password" placeholder="密码" v-model="user.password">
                </div>
                <div class="form-group">
                    <label class="control-label">确认密码</label>
                    <input class="form-control" type="password" placeholder="密码" v-model="checkPassword">
                </div>
                <div class="form-group">
                    <label class="control-label">手机号码</label>
                    <input class="form-control" type="number" placeholder="手机号码" autofocus v-model="user.userPhone">
                </div>
                <div class="form-group">
                    <label class="control-label">邮箱</label>
                    <input class="form-control" type="email" placeholder="邮箱" autofocus v-model="user.userEmail">
                </div>
                <!--<div class="form-group">
                    <label class="control-label">角色</label>
                    <div>
                            <span v-for="(role, index) in allRoles">
                                <input type="radio" name="role" :value="role.roleId" v-model:value="user.role.roleId"/> {{role.roleName}}
                            </span>
                    </div>
                </div>-->
                <div class="form-group mt-3">
                    <p class="semibold-text mb-0">
                        <a href="/login" data-toggle="flip">
                            <i class="fa fa-angle-left fa-fw"></i>
                            返回登录
                        </a>
                    </p>
                </div>
                <div class="form-group btn-container">
                    <button class="btn btn-primary btn-block" @click="register()">
                        <i class="fa fa-sign-in fa-lg fa-fw"></i>
                        注册
                    </button>
                </div>
            </form>
        </div>
    </section>
</div>
<style>
    .login-content .login-box {
        position: relative;
        min-width: 500px;
        min-height: 670px;
        background-color: #fff;
        -webkit-box-shadow: 0px 29px 147.5px 102.5px rgb(0 0 0 / 5%), 0px 29px 95px 0px rgb(0 0 0 / 16%);
        box-shadow: 0px 29px 147.5px 102.5px rgb(0 0 0 / 5%), 0px 29px 95px 0px rgb(0 0 0 / 16%);
        -webkit-perspective: 800px;
        perspective: 800px;
        -webkit-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

    .login-content .logo {
        margin-bottom: 20px;
        color: #fff;
    }
</style>

<script>
    var registerVue = new Vue({
        el: "#registerDiv",
        data: {
            checkPassword: "",
            allRoles: [],
            user: {
                userName: "",
                password: "",
                userEmail: "",
                userPhone: "",
            }
        },
        methods: {
            register: function () {
                var self = this;
                var eReg = /[_a-zA-Z\d\-\.]+@[_a-zA-Z\d\-]+(\.[_a-zA-Z\d\-]+)+$/;
                var pReg = /^0?(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/;
                if (self.user.userName === "" || self.user.password === "" || self.user.userEmail === "" || self.user.userPhone === "" || self.checkPassword === "") {
                    layer.msg("不能为空", {icon: 0});
                    return;
                } else if (!eReg.test(self.user.userEmail)) {
                    layer.msg("邮箱格式不正确", {icon: 0});
                    return;
                } else if (!pReg.test(self.user.userPhone)) {
                    layer.msg("手机号格式不正确", {icon: 0});
                    return;
                } else {
                    if (self.checkPassword !== self.user.password) {
                        layer.msg("两次密码不一致", {icon: 0});
                        return;
                    } else {
                        $.ajax({
                            url: "/api/register",
                            type: "post",
                            contentType: "application/json",
                            data: JSON.stringify(self.user),
                            success: function (rs) {
                                if (rs.status === 200) {
                                    location.href = "/login";
                                } else {
                                    layer.msg(rs.message, {icon: 0});
                                }
                            },
                            error: function (rs) {
                                layer.msg(rs.responseText, {icon: 0});
                            }
                        });
                    }
                }
            },
            initRoles: function () {
                var self = this;
                $.ajax({
                    url: "/api/roles",
                    type: "get",
                    success: function (rs) {
                        self.allRoles = rs;
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                });
            },
        },
        created: function () {
            window.register = this.register;
        },
        mounted: function () {
            this.initRoles();
        }
    })
</script>